<template>
  <div>
    <div class="table-data">
        <div v-show="tabShow">
      <div class="search-box">
        <el-input size="small" v-model="searchMap.title" placeholder="标题"></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button size="small" @click="handleAdd()"><i class="el-icon-plus"></i><span>发放福利</span></el-button>
      </div>
      <el-table
              v-loading="loading"
              element-loading-text="正在加载"
              element-loading-spinner="el-icon-loading" :data="tableData" :header-cell-style="headClass"  style="width:100%"  class="table-box">
        <el-table-column label="序号" prop="id" ></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="类型" prop="type_str"></el-table-column>
        <el-table-column label="发放数量" prop="count" ></el-table-column>
        <el-table-column label="发送时间" prop="created_at"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="操作人" prop="real_name"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <router-link :to="{name:'activityDetail',query:{id:scope.row.id}}" @click.native="handleDetail()" class="user-detail el-button el-button--primary el-button--mini">明细</router-link>
            <el-button size="mini" type="" @click="handleEdit(scope.$index,scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages" ref="page-box">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10,30,50]"
                :page-size="size"
                layout="total,sizes,prev,pager,next,jumper"
                :total="total"
        ></el-pagination>
      </div>
        </div>
    </div>
    <router-view @loadData="loadData"></router-view>
    <EditDialog :key="timer" :isEdit="isEdit" :isStatus="isStatus" :isAdd="isAdd" :form="formData" @closeDialog="closeDialog"></EditDialog>
  </div>
</template>
<script lang="ts">

  import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";

  import activityManage from "@/api/activityManage";
  import EditDialog from "./editDialog.vue";


  @Component({
    components: { EditDialog }
  })
  export default class activityManageClass extends Vue {

    @Provide() tableData: any = []; // 表格数据
    @Provide() page: number = 1; // 当前page
    @Provide() size: number = 10; // 请求数据的个数 默认5
    @Provide() total: number = 0; // 总数据条数
    @Provide() loading: Boolean = true; // 是否显示加载图标
    @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
    @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
      @Provide() tabShow: Boolean = true; // 是显示否列表页面
    @Provide() status: number = 0;//禁用状态
    @Provide() timer: any = '';
    @Provide() isStatus: boolean = false;

    @Provide() formData: any = { // 提交数据信息
      id:"",
        title:"",
        count:"",
        amount: "",
      type:"",
        remark:"",
      status:"",
    };
    @Prop({}) tabVisible!: any;
    @Provide() searchMap: any = { // 搜索内容
      title:''
    };
    @Watch("$route") handleRouteChange(to: any,form:any) {
      if(form.path!='/activityList'){
        this.tabShow=this.tabVisible;
      }
    }

    closeDialog() {
      this.isAdd = false;
      this.isEdit = false;
      this.loadData();
    }

    handleSearch() {
      // 点击搜索
      this.page = 1;
      this.loadData();
    }

    headClass() {
      return "text-align: center;background:#eef1f6;";
    }
    created() {
      this.loadData();
    }

    loadData() {
      activityManage.activityList(this.page,this.size, this.searchMap)
          .then((res: any) => {
            if(res.data.code==200) {
              this.tableData = res.data.data.list;
              this.total = res.data.data.total;
              this.loading = false
            }
          });
    }

    handleSizeChange(val: number): void {
      this.size = val;
      this.page = 1;
      this.loadData();
    }

    handleCurrentChange(val: number): void {
      this.page = val;
      this.loadData();
    }

    // 新增
    handleAdd(){
      this.isAdd=true;
      this.isEdit=true;
      this.formData={id:"",title: "",count:"",type:"",remark:"",status:"",amount:""}
    }
    // 编辑
    handleEdit(index: number, row: any){
      this.isEdit=true;
      if(row.status==1){
        this.isStatus=true
      }else{
        this.isStatus=false
      }
      this.timer = new Date().getTime();
      this.formData.title=row.title
      this.formData.amount=row.amount
      this.formData.count=row.count
      this.formData.id = row.id
      this.formData.type = row.type
      this.formData.remark = row.remark;
    }

    // 详情
      handleDetail() {
          this.tabShow=false;
      }
  }
</script>

<style lang="scss" scoped>
  .el-range-editor.el-input__inner{
    margin-right: 10px
  }
  .add {
    padding: 10px;

  }
  .el-input {
    width: 198px;
  }
  .el-button {
    margin-left: 10px;
    margin-top: 10px;
  }

</style>